<template>
  <div class="setting-product" v-loading="loading" >
    <div class="setting-product-header">
      <div>
        <!-- <button
          type="button"
          class="btn btn-text setting-back-btn"
          @click="back"
        >
          <i class="iconfont icon-arrow-left"></i> 返回
        </button>
        <span class="setting-header-text">|</span> -->
        <span>{{$t('common.form.setting.setCustomField')}}</span>
      </div>
      <base-button
        type="primary"
        native-type="submit"
        :disabled="pending"
        @event="submit"
      >{{$t('common.base.save')}}</base-button
      >
    </div>
    <div class="setting-product-design">
      <form-design
        v-model="fields"
        :max="maxField"
        mode="product_menu"
      ></form-design>
    </div>
  </div>
</template>

<script>
import * as FormUtil from "@src/component/form/util";
// import http from '@src/util/http';
import platform from "@src/platform";
import {
  getProductMenuField,
  setProductMenuField,
} from "@src/api/ProductV2Api";
/* mixin */
import fieldMixin from "@src/mixins/fieldMixin";
import FormDesignMixin from "@src/mixins/formDesign";
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts'

export default {
  name: "setting-product-menu-fields-view",
  mixins: [fieldMixin, FormDesignMixin, ThemeMixin],
  props: {
    initData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: true,
      excludeFormType: ["separator", "email", "phone", "radio"],
      fields: [],
      pending: false,
      maxField: this.initData.fieldNum,
    };
  },
  mounted() {
    // this.setFieldDesignHeight();

    // this.computedFormWidthAndHeight('setting-product');
    // window.addEventListener('resize', this.resizeHandler);
    this.getFieldsInfoReq();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
  },
  methods: {
    back() {
      window.parent.frameHistoryBack(window);
    },
    resizeHandler(event) {
      this.computedFormWidthAndHeight("setting-product");
    },
    async submit() {
      try {
        let fields = FormUtil.toField(this.fields);
        fields.forEach((item) => {
          item.tableName = "product";
          if (item.fieldName == "serialNumber" && item.isSystem) {
            item.setting.serialNumberUnique = item.setting.serialNumberUnique === true;
          }
          if (item.fieldName === 'catalogNum') {
            item.setting.autoGeneration = !!item.setting.autoGeneration;
          }
        });

        let message = FormUtil.validate(fields);
        if (!FormUtil.notification(message, this.$createElement)) return;

        this.pending = true;

        // 计算公式处理
        const qualityRuleField = fields.find(v => v.fieldName === 'qualityRule');
        const formula = qualityRuleField?.setting?.formula
        if(formula) {
          qualityRuleField.setting.formula = formula.map(v => ({
            fieldName: v.fieldName,
            formType: v.formType,
            value: v.value,
            valueLanguage: v.valueLanguage,
            tableName: v.tableName
          }))
        }

        setProductMenuField(fields).then((result) => {
          if (result.code == 0) {
            platform.notification({
              type: "success",
              title: this.$t('common.base.success'),
              message: this.$t('common.form.setting.productTypeFieldUpdateSuccessTips'),
            });
            return window.location.reload();
          }
          platform.notification({
            type: "error",
            title: this.$t('common.form.setting.productTypeFieldUpdateFailTips'),
            message: result.message,
          });
        });
        // let result = await http.post('/setting/product/saveFields', fields);
        // if (result.status == 0) {
        //   platform.notification({
        //     type: 'success',
        //     title: '成功',
        //     message: '产品字段更新成功',
        //   });
        //   return window.location.reload();
        // }

        // platform.notification({
        //   type: 'error',
        //   title: '产品字段更新失败',
        //   message: result.message,
        // });
      } catch (error) {
        console.error(error);
      }
      this.pending = false;
    },
    // 获取产品表单属性列表
    getFieldsInfoReq() {
      getProductMenuField()
        .then((res) => {
          const { status, result, message } = res;
          // if( status == 0){
          const fields = result || [];
          // 产品类型编号设置初始化
          let catalogNum = fields.find(v => v.fieldName === 'catalogNum') || {}
          let catalogNumSetting = catalogNum.setting || {}
          catalogNum.defaultTips = this.$t('product.setting.getFieldsInfoReqTips')
          catalogNumSetting.autoGeneration = catalogNumSetting.autoGeneration ? 1 : 0
          const sortedFields = fields.sort((a, b) => a.orderId - b.orderId);
          this.fields = FormUtil.toFormField(sortedFields);
          // }

          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss">
html,
body {
  height: 100%;
}
.setting-product {
  height: 100%;
  overflow-y: hidden;
}

.setting-header-text {
  margin-right: 12px;
}

.setting-product-header {
  margin: 12px 12px 0 12px;
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #f4f7f5;
}

.setting-product-design {
  margin: 10px;
  height: calc(100% - 53px);
}

.setting-back-btn {
  i.iconfont {
    line-height: 12px;
    font-size: 12px;
  }
}
</style>
